﻿
@using WebApp.Models

@model IEnumerable<ApplicationUser>
@{
    ViewBag.Title = "Index";
}
<style type='text/css'>
    /*設定 數字靠右*/
    td:nth-child(2n) {
        text-align: right;
    }
</style>
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                Users
                <small>Index</small>
            </h1>
            <ol class="breadcrumb">
                <li>
                    <i class="fa fa-home"></i>  @Html.ActionLink("Home", "Index", "Home")
                </li>

                <li class="active">
                    <i class="fa fa-file"></i> Users
                </li>
            </ol>
        </div>
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-lg-12">
            <div id="toolbar" class="btn-group">
                <button type="button" id="newusersbutton" class="btn btn-default">
                    <i class="glyphicon glyphicon-plus"></i>
                </button>

                <button type="button" id="deleteusersbutton" class="btn btn-default">
                    <i class="glyphicon glyphicon-trash"></i>
                </button>
            </div>

            <div class="table-responsive">
                <table id="users-table" data-search="true" class="table table-striped"
                       data-url="/AccountManage/PageList"
                       data-flat="false"
                       data-toolbar="#toolbar"
                       data-pagination="true"
                       data-show-refresh="true"
                       data-show-toggle="true"
                       data-show-columns="true"
                       data-single-select="true"
                       data-page-list="[5, 10, 20, 50, 100, 200]"
                       data-sort-name="Id"
                       data-side-pagination="server"
                       data-click-to-select="true">
                    <thead>
                        <tr>
                            <th data-field="state" data-checkbox="true"></th>
                            <th data-field="Id" data-sortable="true" data-visible="false">
                                @Html.DisplayNameFor(model => model.Id)
                            </th>
                            <th data-field="UserName" data-sortable="true">
                                @Html.DisplayNameFor(model => model.UserName)
                            </th>
                            <th data-field="Email" data-sortable="true">
                                @Html.DisplayNameFor(model => model.Email)
                            </th>
                            <th data-field="PhoneNumber" data-sortable="true">
                                @Html.DisplayNameFor(model => model.PhoneNumber)
                            </th>
                            <th data-field="AccessFailedCount" data-sortable="true">
                                @Html.DisplayNameFor(model => model.AccessFailedCount)
                            </th>
                            <th data-field="LockoutEnabled" data-sortable="true">
                                @Html.DisplayNameFor(model => model.LockoutEnabled)
                            </th>
                            <th data-field="LockoutEndDateUtc" data-sortable="true">
                                @Html.DisplayNameFor(model => model.LockoutEndDateUtc)
                            </th>
                            <th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>
                        </tr>
                    </thead>


                </table>
            </div>
            <br />

        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        var $userstable = $('#users-table');
        var $deleteusersbutton = $('#deleteusersbutton');
        function actionFormatter(value, row, index) {
            return [
                '<a class="edit" href="javascript:void(0)" title="Edit">',
                '<i class="glyphicon glyphicon-edit"></i>',
                '</a> &nbsp ',
                '<a class="remove" href="javascript:void(0)" title="Remove">',
                '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ].join('');
        }

        window.actionEvents = {

            'click .edit': function (e, value, row, index) {
                 var url="/AccountManage/Edit/" + row.Id
                 $(location).attr('href', url);
            },
            'click .remove': function (e, value, row, index) {
                deleteUsers(row.Id);
                console.log(value, row, index);
            }

        }

        //jquery post /AccountManager/Delete/:id
        function deleteUsers(id) {
            var url = '@Url.Action("Delete")';
            bootbox.dialog({
                message: "Are you sure delete " + id,
                title: "Delete Users ",
                buttons: {
                    Cancel: {
                        label: "Cancel",
                        className: "btn-default",
                        callback: function () {

                        }
                    },
                    OK: {
                        label: "OK",
                        className: "btn-success",
                        callback: function () {
                            $.post(url, { id: id }, function (data) {
                                $userstable.bootstrapTable('remove', { field: 'Id', values: [id] });
                                //console.log('remove' + row.Id);
                            });
                        }
                    }
                }
            });
        }
        $(document).ready(function (e) {
            $userstable = $('#users-table').bootstrapTable(
                {
                }
                );
            $userstable.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
                $deleteusersbutton.prop('disabled', !$userstable.bootstrapTable('getSelections').length);
            });

            $('#newusersbutton').on('click', function () {

                $(location).attr('href', "/AccountManage/Create");
            });
            $('#deleteusersbutton').on('click', function () {
                var selected = $userstable.bootstrapTable('getSelections');
                if (selected.length > 0) {
                    deleteUsers(selected[0].Id);
                }

            });
        }
        );

    </script>

}